<template>
	<view style="background-color: #F6FAFA;height:100vh;">
		<view scroll-with-animation scroll-y style="height: 100%;position: relative;background-color: #F6FAFA;">
			<view class="list pl25 pr25" style="text-align: center;background-color: #F6FAFA;padding-top: 10rpx;">
				<view v-for="(item,index) in docList" :key="index" @click="getDocInfo(item.id,item.recNum)"
					style="border: 1px solid #F2F9F9;box-shadow: 0px 1px 17px 1px rgba(162, 215, 211, 0.16);border-radius: 32rpx;background-color: #FFFFFF;margin-top: 20rpx;">
					<view class="flex" style="padding-left: 20rpx;box-sizing: border-box;padding-right: 25rpx;">
						<view class="rela head">
							<image :src="item.photo"></image>
							<view class="w100 abs texts ftc cfff" v-if="item.onlinestate==8"><text class="text3" style="background: #00BAAD;">接诊</text></view>
							<view class="w100 abs texts ftc cfff" v-if="item.onlinestate==0"><text class="text3">离线</text></view>
							<view class="w100 abs texts ftc cfff" v-if="item.onlinestate==7"><text class="text3" style="background: #B1E5E1;">休息</text></view>
							<view class="w100 abs texts ftc cfff" v-if="item.onlinestate==6"><text class="text3">离开</text></view>
						</view>
						<view class="it1 pl30">
							<view class="flex flex-ac">
								<text class="ft16 c000 bold">{{item.name}}</text>
								<view class="ml30">{{item.deptName}}</view>
								<text class="ml30">{{item.title}}</text>
							</view>
							<view class="lineText mt20" style="text-align: left;">{{item.disease}}</view>
							<view class="mt25 flex flex-ac flex-pc">
								<view class="it1 flex flex-ac doctor">
									<view v-if="item.isCollect == '1'" style="width: 160rpx;height: 60rpx;line-height: 60rpx;background: #DBF6F4;border-radius: 45rpx;color: #00BAAD;margin-right: 10rpx;">
										关注成功
									</view>
									<view v-if="item.isWz == '1'" style="width: 160rpx;height: 60rpx;line-height: 60rpx;background: #DBF6F4;border-radius: 45rpx;color: #00BAAD;">
										问诊过
									</view>
								</view>
								<!--  -->
							</view>
						</view>
					</view>
				</view>
		
				<uni-load-more :status="message" :contentText="contentText" @clickLoadMore="loadMore"></uni-load-more>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				wx: "https://app.mzmzb.com",
				current: 1,
				pageIndex:1,
				hasNextPage: true, //是否有下一页
				message: 'more',
				allDocList: [],
				docList: [],
				usrUserId: null,
				contentText: {
					contentdown: "点击显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			};
		},
		onLoad() {
			var usrUserId = uni.getStorageSync("usrUserId");
			if(usrUserId){
				this.isUserId = false;
				this.usrUserId=usrUserId;
				this.initData(this.pageIndex);
			}
		},
		methods: {
			//跳转医生详情页
			getDocInfo(id, recNum) {
				var that = this;
				var docId = id;
				var recNum = recNum
				uni.navigateTo({
					url: '/pages4/doctor/index?docId=' + docId + '&usrUserId=' + this.usrUserId + '&recNum=' + recNum
				});
			},
			initData(pageIndex){
				var that = this;
				var usrUserId = that.usrUserId;//用户id
				var hosId = this.hspId;//永川医院id
				let data={
					usrUserId : usrUserId, 
					hosId : hosId,
					current:pageIndex
				}
				that.func.$request('wx/getUserDoctorList.tz',data,'GET').then(res=>{
					if(res.data.success){
						console.log(res.data.result.list)
						that.hasNextPage = res.data.result.hasNextPage;
						if(that.hasNextPage){
							that.message = 'more';
						}else{
							that.message = 'noMore';
						}
						var list = res.data.result.list;
						if(list.length>0){
							list.forEach(function(item,index){
								that.docList.push(item);
							});
						}
					}else{
						that.message = 'noMore';
					}
				}).catch(error=>{
					that.message = 'noMore';
				})
				
			},
			
			
			// //获取医生列表
			// getDocList() {},
			//加载更多
			loadMore(e){
				if(e.detail.status =='more'){
					var that = this;
					that.message = 'loading';
					that.pageIndex = that.pageIndex+1;
					setTimeout(()=>{
						that.initData(that.pageIndex)
						if(that.hasNextPage){
							that.message = 'more';
						}else{
							that.message = 'noMore';
						}
					},500);
				}
			}
		}
	};
</script>

<style lang="less">
	.list>view {
		padding: 40rpx 0;
		border-top: 1rpx solid #efefef;
	
		.doctor {
			color: #74a6fd;
	
			.doctorv {
				width: 150rpx;
	
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.list .head {
		height: 140rpx;
	
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	
		.texts {
			height: 32rpx;
			bottom: -4rpx;
	
			text {
				display: inline-block;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 16rpx;
				background: #74a6fd;
				font-size: 22rpx;
				padding: 0 15rpx;
			}
	
			.text1 {
				background: #ff0000;
			}
			
			.text3 {
				background: #999999;
			}
	
			.text2 {
				background: #fec322;
			}
		}
	}
	
</style>
